<template>
  <div class="list-main">
    <ScrollContainer>
      <div v-for="item in list" :key="item.title" class="item">
        <div
          style="
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f5f6f7;
            padding-bottom: 12px;
          "
        >
          <span style="font-weight: bold; color: #333">{{ item.processStep }}</span>
          <span>{{ item.inceptDate }}</span>
        </div>
        <ApproveItem :item="i" v-for="(i, x) in item.workItemApprovalResList" :key="x" />
      </div>
    </ScrollContainer>
    <!-- <div
        v-for="(childrenItem, index) in item.workItemTranResList"
        :key="index"
        class="item children-item"
      >
        <div class="head-type">
          <template v-if="childrenItem.operationType == 2">
            <div class="type-name">{{ childrenItem.operationTypeName }}</div>
            <div class="desc"
              >{{ childrenItem.userName }} >
              {{ childrenItem.workItemTranDetailResList[0].acceptName }}</div
            >
          </template>
          <template v-else>
            <div class="type-name">{{ childrenItem.operationTypeName }}</div>
            <div class="desc"
              ><template v-if="childrenItem.transComment"
                >{{ childrenItem.userName }}：{{ childrenItem.transComment }}</template
              >
              <template v-else>{{ childrenItem.userName }}：未填写内容</template>
            </div>
          </template>
          <div class="time">{{ childrenItem.transDate }}</div>
        </div>
        <div
          v-for="(grandsonItem, grandsonIndex) in childrenItem.workItemTranDetailResList"
          :key="grandsonIndex"
          class="item grandson-item"
        >
          <template v-if="childrenItem.operationType == 2">
            <div class="mid-content">
              <div class="desc turn"
                ><span>{{ childrenItem.operationTypeName }}描述：</span
                >{{ childrenItem.transComment }}</div
              >
            </div>
          </template>
          <template v-else>
            <div class="mid-content">
              <div class="mid-info">
                <div class="name">{{ grandsonItem.acceptName }}</div>
                <div :class="['btn', getStatusClass(grandsonItem.transStatus)]">{{
                  grandsonItem.transStatusName
                }}</div>
                <div class="time" v-if="grandsonItem.readDate"
                  ><img :src="clock" />{{ grandsonItem.readDate }}</div
                >
              </div>
              <div class="desc" v-if="grandsonItem.readComment"
                ><span>意见描述：</span>{{ grandsonItem.readComment }}</div
              >
            </div>
          </template>
        </div>
      </div> 
     </div>-->
  </div>
</template>

<script setup lang="ts">
  import ApproveItem from './ApproveItem.vue';
  // import clock from '/@/assets/images/clock.png';
  import { ScrollContainer } from '/@/components/Container/index';
  const props = defineProps({
    list: {
      type: Array as unknown as any[],
      default: () => [],
    },
  });

  // const getStatusClass = (status) => {
  //   const statusMap = new Map([
  //     [1, 'blue'],
  //     [2, 'yellow'],
  //     [3, 'green'],
  //   ]);
  //   return statusMap.get(status);
  // };
  console.log('%c审批信息数组-------', 'color:#8ae;font-size:30px;font-weight:bold', props.list);
</script>

<style lang="less" scoped>
  .list-main {
    // margin: 0 auto;
    width: 820px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;

    .time {
      color: #999999;
    }

    .item {
      margin-bottom: 32px;

      .top-info {
        display: flex;
        justify-content: space-between;
        font-family: PingFang SC-Semibold, PingFang SC;

        .title {
          font-weight: 600;
          color: #333333;
        }
      }

      .mid-info {
        margin: 18px 0 12px 0;
        display: flex;
        align-items: center;

        img {
          width: 18px;
        }

        .time {
          display: flex;
          align-items: center;
          color: #999999;
          margin: 0 16px 0 6px;

          img {
            margin-right: 6px;
          }
        }

        .name {
          color: #333333;
          margin-right: 6px;
        }

        .btn {
          width: 56px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 4px 4px 4px 4px;
          color: #666;
          background: rgba(77, 184, 3, 0.05);
          padding: 2px 0;
        }

        .green {
          background: rgba(77, 184, 3, 0.05);
          color: rgba(77, 184, 3, 1);
        }

        .blue {
          background: rgba(43, 99, 161, 0.05);
          color: rgba(43, 99, 161, 1);
        }

        .yellow {
          background: rgba(252, 124, 34, 0.05);
          color: rgba(252, 124, 34, 1);
        }
      }

      .remark {
        padding: 14px;
        width: 100%;
        background: rgba(43, 99, 161, 0.05);
        border-radius: 2px 2px 2px 2px;

        .label {
          color: #999999;
        }
      }
    }

    .children-item {
      width: 100%;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #f5f6f7;
      margin: 16px 0;

      .head-type {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        border: 1px solid #f5f6f7;

        .type-name {
          padding: 2px 8px;
          background: rgba(51, 51, 51, 0.05);
          border-radius: 4px 4px 4px 4px;
        }

        .desc {
          flex: 1;
          font-size: 14px;
          color: #333333;
          margin-left: 12px;
        }
      }
    }

    .grandson-item {
      padding: 0 16px;
      margin: 12px 0;

      .mid-content {
        padding: 16px;
        background-color: rgba(43, 99, 161, 0.03);
      }

      .mid-info {
        margin: 0;

        .btn {
          color: #333333;
          background-color: #ebedf0;
        }
      }

      .desc {
        font-size: 14px;
        color: #333333;
        margin-top: 8px;

        &.turn {
          margin-top: 0;
        }

        span {
          color: #999999;
        }
      }
    }
  }
</style>
